<template>
	<div v-if="detail">
		<img :src="detail.url" alt="" style="width: 100%;">
		<h3>{{ detail.title }}</h3>
		<p>{{ detail.desc }}</p>
		<p>￥：{{ detail.price }}</p>
	</div>
	<van-action-bar>
		<van-action-bar-icon icon="chat-o" text="客服" />
		<van-action-bar-icon icon="cart-o" text="购物车" :badge="allCountNoCheck" @click="$router.push('/car')"/>
		<van-action-bar-icon icon="shop-o" text="店铺" />
		<van-action-bar-button type="danger" text="立即购买" @click="handleAddCar"/>
	</van-action-bar>
</template>

<script lang="ts" setup>
// import { computed } from '@vue/reactivity';
import { defineProps, onMounted, ref, computed } from 'vue'
import axios from 'axios'
import { ListItemState } from '@/store'
import { useStore } from 'vuex';
const store = useStore()
const props = defineProps<{
	id: string
}>()
const detail = ref<ListItemState>()
// const detail = computed(() => store.getters.detail(props.id))
const handleAddCar = () => {
	store.commit('addCar', detail.value)
}
onMounted(() => {
	axios.post('/api/detail', { id: props.id }).then(resp => {
		detail.value = resp.data.data
	})
})

const allCountNoCheck = computed(() => store.getters.allCountNoCheck)

</script>